<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS2 Test: Colors</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/syndata.html#color-units">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
const valid_colors = {
  "#000000": "rgb(0, 0, 0)",
  "#000001": "rgb(0, 0, 1)",
  "#000099": "rgb(0, 0, 153)",
  "#0000fe": "rgb(0, 0, 254)",
  "#0000ff": "rgb(0, 0, 255)",
  "#000100": "rgb(0, 1, 0)",
  "#000": "rgb(0, 0, 0)",
  "#001": "rgb(0, 0, 17)",
  "#009900": "rgb(0, 153, 0)",
  "#009": "rgb(0, 0, 153)",
  "#00e": "rgb(0, 0, 238)",
  "#00f": "rgb(0, 0, 255)",
  "#00fe00": "rgb(0, 254, 0)",
  "#00ff00": "rgb(0, 255, 0)",
  "#010000": "rgb(1, 0, 0)",
  "#010101": "rgb(1, 1, 1)",
  "#010": "rgb(0, 17, 0)",
  "#090": "rgb(0, 153, 0)",
  "#0e0": "rgb(0, 238, 0)",
  "#0f0": "rgb(0, 255, 0)",
  "#1000": "rgba(17, 0, 0, 0)",
  "#100": "rgb(17, 0, 0)",
  "#111": "rgb(17, 17, 17)",
  "#900": "rgb(153, 0, 0)",
  "#990000": "rgb(153, 0, 0)",
  "#999999": "rgb(153, 153, 153)",
  "#999": "rgb(153, 153, 153)",
  "#e00": "rgb(238, 0, 0)",
  "#eee": "rgb(238, 238, 238)",
  "#f00": "rgb(255, 0, 0)",
  "#fe0000": "rgb(254, 0, 0)",
  "#fefefe": "rgb(254, 254, 254)",
  "#ff0000": "rgb(255, 0, 0)",
  "#fff": "rgb(255, 255, 255)",
  "#ffffff": "rgb(255, 255, 255)",
  "rgb(+0%, +0%, +0%)": "rgb(0, 0, 0)",
  "rgb(+0%, 0%, 0%)": "rgb(0, 0, 0)",
  "rgb(+0, +0, +0)": "rgb(0, 0, 0)",
  "rgb(+0, 0, 0)": "rgb(0, 0, 0)",
  "rgb(+100%, +100%, +100%)": "rgb(255, 255, 255)",
  "rgb(+100%, 0%, 0%)": "rgb(255, 0, 0)",
  "rgb(+128, +128, +128)": "rgb(128, 128, 128)",
  "rgb(+128, 0, 0)": "rgb(128, 0, 0)",
  "rgb(+255, +255, +255)": "rgb(255, 255, 255)",
  "rgb(+255, 0, 0)": "rgb(255, 0, 0)",
  "rgb(+40%, +40%, +40%)": "rgb(102, 102, 102)",
  "rgb(+40%, 0%, 0%)": "rgb(102, 0, 0)",
  "rgb(-0%, -0%, -0%)": "rgb(0, 0, 0)",
  "rgb(-0%, 0%, 0%)": "rgb(0, 0, 0)",
  "rgb(-0, -0, -0)": "rgb(0, 0, 0)",
  "rgb(-0, 0, 0)": "rgb(0, 0, 0)",
  "rgb(-1%, -1%, -1%)": "rgb(0, 0, 0)",
  "rgb(-1%, 0%, 0%)": "rgb(0, 0, 0)",
  "rgb(-1, -1, -1)": "rgb(0, 0, 0)",
  "rgb(-1, 0, 0)": "rgb(0, 0, 0)",
  "rgb(0%, +0%, 0%)": "rgb(0, 0, 0)",
  "rgb(0%, +100%, 0%)": "rgb(0, 255, 0)",
  "rgb(0%, +40%, 0%)": "rgb(0, 102, 0)",
  "rgb(0%, -0%, 0%)": "rgb(0, 0, 0)",
  "rgb(0%, -1%, 0%)": "rgb(0, 0, 0)",
  "rgb(0%, 0%, +0%)": "rgb(0, 0, 0)",
  "rgb(0%, 0%, +100%)": "rgb(0, 0, 255)",
  "rgb(0%, 0%, +40%)": "rgb(0, 0, 102)",
  "rgb(0%, 0%, -0%)": "rgb(0, 0, 0)",
  "rgb(0%, 0%, -1%)": "rgb(0, 0, 0)",
  "rgb(0%, 0%, 0%)": "rgb(0, 0, 0)",
  "rgb(0%, 0%, 1%)": "rgb(0, 0, 3)",
  "rgb(0%, 0%, 100%)": "rgb(0, 0, 255)",
  "rgb(0%, 0%, 101%)": "rgb(0, 0, 255)",
  "rgb(0%, 0%, 40%)": "rgb(0, 0, 102)",
  "rgb(0%, 0%, 99%)": "rgb(0, 0, 252)",
  "rgb(0%, 1%, 0%)": "rgb(0, 3, 0)",
  "rgb(0%, 100%, 0%)": "rgb(0, 255, 0)",
  "rgb(0%, 101%, 0%)": "rgb(0, 255, 0)",
  "rgb(0%, 40%, 0%)": "rgb(0, 102, 0)",
  "rgb(0%, 99%, 0%)": "rgb(0, 252, 0)",
  "rgb(0, +0, 0)": "rgb(0, 0, 0)",
  "rgb(0, +128, 0)": "rgb(0, 128, 0)",
  "rgb(0, +255, 0)": "rgb(0, 255, 0)",
  "rgb(0, -0, 0)": "rgb(0, 0, 0)",
  "rgb(0, -1, 0)": "rgb(0, 0, 0)",
  "rgb(0, 0, +0)": "rgb(0, 0, 0)",
  "rgb(0, 0, +128)": "rgb(0, 0, 128)",
  "rgb(0, 0, +255)": "rgb(0, 0, 255)",
  "rgb(0, 0, -0)": "rgb(0, 0, 0)",
  "rgb(0, 0, -1)": "rgb(0, 0, 0)",
  "rgb(0, 0, 0)": "rgb(0, 0, 0)",
  "rgb(0, 0, 1)": "rgb(0, 0, 1)",
  "rgb(0, 0, 128)": "rgb(0, 0, 128)",
  "rgb(0, 0, 254)": "rgb(0, 0, 254)",
  "rgb(0, 0, 255)": "rgb(0, 0, 255)",
  "rgb(0, 0, 256)": "rgb(0, 0, 255)",
  "rgb(0, 1, 0)": "rgb(0, 1, 0)",
  "rgb(0, 128, 0)": "rgb(0, 128, 0)",
  "rgb(0, 254, 0)": "rgb(0, 254, 0)",
  "rgb(0, 255, 0)": "rgb(0, 255, 0)",
  "rgb(0, 256, 0)": "rgb(0, 255, 0)",
  "rgb(1%, 0%, 0%)": "rgb(3, 0, 0)",
  "rgb(1%, 1%, 1%)": "rgb(3, 3, 3)",
  "rgb(1, 0, 0)": "rgb(1, 0, 0)",
  "rgb(1, 1, 1)": "rgb(1, 1, 1)",
  "rgb(100%, 0%, 0%)": "rgb(255, 0, 0)",
  "rgb(100%, 100%, 100%)": "rgb(255, 255, 255)",
  "rgb(101%, 0%, 0%)": "rgb(255, 0, 0)",
  "rgb(101%, 101%, 101%)": "rgb(255, 255, 255)",
  "rgb(128, 0, 0)": "rgb(128, 0, 0)",
  "rgb(128, 128, 128)": "rgb(128, 128, 128)",
  "rgb(254, 0, 0)": "rgb(254, 0, 0)",
  "rgb(254, 254, 254)": "rgb(254, 254, 254)",
  "rgb(255, 0, 0)": "rgb(255, 0, 0)",
  "rgb(255, 255, 255)": "rgb(255, 255, 255)",
  "rgb(256, 0, 0)": "rgb(255, 0, 0)",
  "rgb(256, 256, 256)": "rgb(255, 255, 255)",
  "rgb(40%, 0%, 0%)": "rgb(102, 0, 0)",
  "rgb(40%, 40%, 40%)": "rgb(102, 102, 102)",
  "rgb(99%, 0%, 0%)": "rgb(252, 0, 0)",
  "rgb(99%, 99%, 99%)": "rgb(252, 252, 252)",
  "rgb(0.0%, 100.0%, 0.0%)": "rgb(0, 255, 0)",
  "aqua": "aqua",
  "black": "black",
  "blue": "blue",
  "fuchsia": "fuchsia",
  "gray": "gray",
  "green": "green",
  "inherit": "inherit",
  "lime": "lime",
  "maroon": "maroon",
  "navy": "navy",
  "olive": "olive",
  "orange": "orange",
  "purple": "purple",
  "red": "red",
  "silver": "silver",
  "teal": "teal",
  "transparent": "transparent",
  "white": "white",
  "yellow": "yellow",
};

const invalid_colors = [
  "#00000",
  "#0000fg",
  "#00",
  "#00fg00",
  "#00g",
  "#0g0",
  "#1000000",
  "#fg0000",
  "#fgfgfg",
  "#g00",
  "#ggg",
  "invalidValue",
];

const color_properties = [
  "color",
  "background-color",
  "border-top-color",
  "border-bottom-color",
  "border-left-color",
  "border-right-color",
  "outline-color",
  "text-decoration-color",
];

for (const prop of color_properties) {
  for (const [value, serializedValue] of Object.entries(valid_colors)) {
    test_valid_value(prop, value, serializedValue);
  }

  for (const color of invalid_colors) {
    test_invalid_value(prop, color);
  }
}
</script>
</body>
</html>
